Reactive Variables
Reactive Variables (ReactiveVar) হল Meteor ফ্রেমওয়ার্কের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ক্লায়েন্ট সাইডে reactive data পরিচালনা করতে ব্যবহৃত হয়। এগুলি reactive programming ধারণার অংশ এবং ডেটা পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে ট্র্যাক ও আপডেট করে।
ReactiveVar কি?
ReactiveVar একটি Meteor object যা single value ধারণ করে এবং তার মান পরিবর্তিত হলে স্বয়ংক্রিয়ভাবে যেসব ফাংশন বা টেমপ্লেট সেটির উপর নির্ভরশীল থাকে, সেগুলিকে পুনরায় রান করায়। এটি reactive data sources হিসেবে কাজ করে এবং মান পরিবর্তন হলে তা ক্লায়েন্ট সাইডে রিফ্রেশ হয়।
ReactiveVar তৈরি করা
ReactiveVar তৈরি করতে প্রথমে new ReactiveVar() ব্যবহার করতে হয়।
// ReactiveVar তৈরি করা
let counter = new ReactiveVar(0);
এখানে, counter হল একটি ReactiveVar যা শুরুতে 0 মান ধারণ করে।
ReactiveVar এর মান পরিবর্তন করা
ReacticeVar এর মান পরিবর্তন করতে set() মেথড ব্যবহার করা হয়:
// ReactiveVar এর মান পরিবর্তন করা
counter.set(counter.get() + 1);
এখানে get() মেথডটি ব্যবহার করে বর্তমান মান নেওয়া হয় এবং তারপর set() মেথড ব্যবহার করে সেটি পরিবর্তন করা হয়।
ReactiveVar এর মান পড়া
ReactiveVar এর মান পড়তে get() মেথড ব্যবহার করা হয়:
// ReactiveVar এর মান পড়া
let currentCounterValue = counter.get();
console.log(currentCounterValue);
ReactiveVar এবং Tracker ব্যবহার
Tracker.autorun() ব্যবহার করে ReactiveVar এর মান পরিবর্তনের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে কোনো ফাংশন চালানো যায়:
// Tracker.autorun() ব্যবহার করে ReactiveVar ট্র্যাক করা
Tracker.autorun(function() {
let currentValue = counter.get();
console.log("Counter Value: " + currentValue);
});
এখানে, Tracker.autorun() ফাংশনটি স্বয়ংক্রিয়ভাবে counter এর মান পরিবর্তনের সময় প্রতিবার রান হবে।
Reactive Templates
Reactive Templates হল Meteor এর একটি কৌশল যা Blaze টেমপ্লেট ইঞ্জিনে ব্যবহৃত হয়, যাতে reactive data sources ক্লায়েন্ট সাইডে স্বয়ংক্রিয়ভাবে আপডেট হয় এবং ব্যবহারকারীর ইন্টারফেসে পরিবর্তন প্রদর্শিত হয়।
Reactive Template এর ধারণা
Meteor-এর Blaze টেমপ্লেট ইঞ্জিন reactive। এর মানে হল যে, টেমপ্লেটের যে অংশগুলো reactive data sources (যেমন: ReactiveVar, MongoDB collections, Session variables) এর উপর নির্ভরশীল, সেগুলি ডেটার পরিবর্তন হলে স্বয়ংক্রিয়ভাবে আপডেট হয়।
Reactive Template তৈরি করা
<!-- HTML Template -->
<template name="counterTemplate">
<h1>Counter: {{counter}}</h1>
<button>Increase</button>
</template>
// JavaScript Code
Template.counterTemplate.helpers({
counter() {
return counter.get(); // ReactiveVar থেকে মান নিবে
}
});
Template.counterTemplate.events({
'click button'(event, instance) {
counter.set(counter.get() + 1); // ReactiveVar মান বাড়ানো
}
});
এখানে counterTemplate টেমপ্লেটটি একটি ReactiveVar counter এর মান দেখায় এবং Increase বাটনে ক্লিক করলে সেই মান বাড়িয়ে নতুন মান প্রদর্শিত হবে। helpers() এবং events() এর মাধ্যমে ডেটা এবং ইন্টারঅ্যাকশন পরিচালনা করা হচ্ছে।
Reactive Data Display
ReactiveVar বা অন্যান্য reactive data sources এর সাথে ব্যবহৃত হলে, Blaze টেমপ্লেট স্বয়ংক্রিয়ভাবে DOM আপডেট করবে, যখন ডেটার মান পরিবর্তিত হবে। ফলে ডেভেলপাররা ইন্টারফেসে ডেটা পরিবর্তন সঠিকভাবে দেখতে পারবেন এবং অ্যাপ্লিকেশন হবে আরও ইন্টারঅ্যাকটিভ।
Session Variables এবং Reactive Templates
Meteor এর Session ভেরিয়েবলগুলি একটি reactive data source হিসেবে ব্যবহৃত হতে পারে। ReactiveVar এবং Session ভেরিয়েবল উভয়ই helpers এবং events এ ব্যবহার করা যায়।
// Session ব্যবহার করে Reactive Template
Template.counterTemplate.helpers({
counter() {
return Session.get("counter"); // Session থেকে মান নিবে
}
});
Template.counterTemplate.events({
'click button'(event, instance) {
Session.set("counter", Session.get("counter") + 1); // Session মান বাড়ানো
}
});
এখানে Session ব্যবহার করে counter ভেরিয়েবলটি ট্র্যাক করা হয়েছে, এবং বাটনে ক্লিক করলে তা আপডেট হবে।
সারাংশ
Meteor এর Reactive Variables এবং Reactive Templates হল reactive programming এর শক্তিশালী উপাদান। ReactiveVar ক্লায়েন্ট সাইডে একটি একক ডেটা মান রাখে, যা স্বয়ংক্রিয়ভাবে আপডেট হয় যখন তার মান পরিবর্তিত হয়। Reactive Templates Meteor-এর Blaze টেমপ্লেট ইঞ্জিনের মাধ্যমে তৈরি করা হয় এবং এগুলি ডেটা পরিবর্তন হলে স্বয়ংক্রিয়ভাবে DOM আপডেট করে, যা ব্যবহারকারীর ইন্টারফেসে পরিবর্তন প্রদর্শন করে। এই দুটি বৈশিষ্ট্য Meteor অ্যাপ্লিকেশনগুলিকে real-time এবং interactive বানাতে সহায়ক।
Read more
